import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:animations/animations.dart';
import 'package:flutter/cupertino.dart';

// 记得添加依赖 animations: ^1.1.1

void main() => runApp(RootApp());

// 定义根目录Wigdget
class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 根视图
    return MaterialApp(home: AnimationOpenContainerPage());
  }
}

class AnimationOpenContainerPage extends StatefulWidget {
  @override
  _AnimationOpenContainerPageState createState() =>
      _AnimationOpenContainerPageState();
}

class _AnimationOpenContainerPageState
    extends State<AnimationOpenContainerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("A页面")),
      body: buildBodyWidget(),
    );
  }

  Widget buildBodyWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      child: new GridView.builder(
        // 配置代理
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 每行三列
          crossAxisCount: 3,
          // 行之间的间距
          mainAxisSpacing: 1.0,
          // 列之间的间距
          crossAxisSpacing: 1.0,
          // 子item的宽高比
          childAspectRatio: 0.8,
        ),
        itemCount: 50,
        itemBuilder: (BuildContext context, int index) {
          return Container(
              color: Colors.grey, child: buildItemAnimationWidget(index));
        },
      ),
    );
  }

  Widget buildItemAnimationWidget(int index) {
    return OpenContainer(
      ///过渡的动画类型
      transitionType: ContainerTransitionType.fade,

      ///过渡时间
      transitionDuration: Duration(milliseconds: 800),

      ///closedBuilder配置的Widget的背景色
      closedColor: Colors.transparent,
      openColor: Colors.transparent,

      ///阴影高度
      closedElevation: 0.0,
      openElevation: 0.0,
      //  点击打开的页面 如这里是详情页面
      openBuilder:
          (BuildContext context, void Function({Object returnValue}) action) {
        return DetailPage();
      },
      // 显示当前widget
      closedBuilder: (BuildContext context, void Function() action) {
        return buildItem(index);
      },
    );
  }

  Widget buildItemWidget(int index) {
    return InkWell(
        onTap: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                return DetailPage();
              },
            ),
          );
        },
        child: buildItem(index));
  }

  Widget buildItem(int index) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset("images/3.0/logo.jpg", fit: BoxFit.fill),
          SizedBox(
            height: 10,
          ),
          Text("每日分享"),
        ],
      ),
    );
  }
}

class DetailPage extends StatefulWidget {
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("每日分享")), body: buildCurrentWidget());
  }

  Widget buildCurrentWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset("images/3.0/logo.jpg", fit: BoxFit.fill),
          SizedBox(
            height: 10,
          ),
          Text("每日分享"),
          SizedBox(
            height: 10,
          ),
          Container(
            child: Text(
                "Material Design 设计风格中的容器转换过渡 ，如一个列表点击跳转详情，进行无缝切换，在Flutter 中也就是 Container transform 容器切换，通过OpenContainer来实现。 OpenContainer 在两个子窗口组件之间进行无缝切换，执行起来的效果看起来像是同一个窗口组件切换，分别通过 closedBuilder 和 openBuilder 属性来配置。 本节视频是在 GridView 中结合 OpenContainer 来实践的一个Demo效果。",
                softWrap: true,
                overflow: TextOverflow.ellipsis),
          ),
        ],
      ),
    );
  }
}
